import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

import '../../function/meal_detail_page/widgets/meal_detail_page.dart';
import '../../global/extension/int_extension.dart';
import '../../global/provider/favor_provider.dart';
import '../models/common_meal_model.dart';

final cardRadius = 12.px;

class YSHMealListCell extends StatelessWidget {
  final YSHCommonMealModel _mealModel;
  const YSHMealListCell(this._mealModel, {Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        Navigator.of(context)
            .pushNamed(YSHMealDetailPage.routeName, arguments: _mealModel);
      },
      child: Card(
        // 外边距
        margin: EdgeInsets.all(10.px),
        // 阴影深度
        elevation: 5,
        // 圆角
        shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(cardRadius)),
        child: Column(
          children: [_setupBasicInfo(context), _setupOperationInfo(context)],
        ),
      ),
    );
  }

  // 搭建图文信息区域
  Widget _setupBasicInfo(BuildContext context) {
    return Stack(
      children: [
        // 圆角图片
        ClipRRect(
          borderRadius: BorderRadius.only(
              topLeft: Radius.circular(cardRadius),
              topRight: Radius.circular(cardRadius)),
          child: Image.network(_mealModel.imageUrl!,
              width: double.infinity, height: 250.px, fit: BoxFit.cover),
        ),
        // 文本
        Positioned(
            right: 10.px,
            bottom: 10.px,
            child: Container(
              width: 300.px,
              padding: EdgeInsets.symmetric(vertical: 5.px, horizontal: 10.px),
              decoration: BoxDecoration(
                  color: Colors.black54,
                  borderRadius: BorderRadius.circular(6.px)),
              child: Text(_mealModel.title ?? '',
                  style: Theme.of(context)
                      .textTheme
                      .headlineSmall
                      ?.copyWith(color: Colors.white)),
            ))
      ],
    );
  }

  // 搭建按钮操作区域
  Widget _setupOperationInfo(BuildContext context) {
    return Padding(
        padding: EdgeInsets.all(4.px),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: [
            YSHMealListCellOperationItem(
                const Icon(Icons.schedule), '${_mealModel.duration}分钟'),
            YSHMealListCellOperationItem(
                const Icon(Icons.restaurant), '${_mealModel.complexityStr}'),
            _setupFavorItem()
          ],
        ));
  }

  // 收藏状态组件
  Widget _setupFavorItem() {
    return Consumer<YSHFavorProvider>(builder: (ctx, favorProvider, child) {
      final iconData = favorProvider.isFavorMeal(_mealModel)
          ? Icons.favorite
          : Icons.favorite_border;
      final iconColor =
      favorProvider.isFavorMeal(_mealModel) ? Colors.red : Colors.black;
      final favorStatus = favorProvider.isFavorMeal(_mealModel) ? '已收藏' : '未收藏';
      return GestureDetector(
          onTap: () {
            favorProvider.handleFavorMeal(_mealModel);
          },
          child:
          YSHMealListCellOperationItem(Icon(iconData, color: iconColor), favorStatus));
    });
  }
}

class YSHMealListCellOperationItem extends StatelessWidget {
  final Widget _icon;
  final String _title;

  const YSHMealListCellOperationItem(this._icon, this._title, {Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 100.px,
      padding: EdgeInsets.symmetric(vertical: 12.px),
      child: Row(
        children: [
          _icon,
          SizedBox(width: 3.px),
          Text(_title)
        ],
      ),
    );
  }
}

